<style lang='less' scoped>
    .footer-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        padding: 10rpx 0rpx 0px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0 3px 10px #b2b2b2;
        .footer-bar__item { 
            flex: 1;
            position: relative;
            img{
                width: 20px;
                height: 20px;
                margin-bottom:2px;
            }
            .qryCount{
               width: 13px;
               height: 13px;
               position: absolute;
               top: -4px;
               right: 30px;
               border-radius: 50%;
               font-size: 9px;
               line-height: 13px;
               text-align: center;
               color: #fff;
               background: #7A1634     
            }
            .iconfont{
                font-size:40rpx !important;
                margin-bottom: 4rpx;
                position: relative;
                &.red-dot::after{
                    position: absolute;
                    content: "";
                    top: -2px;
                    right: -5px;
                    background: red;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                }
            }
            &.active{
                color: #7A1634;
                .text-sliver{
                    color: #7A1634 !important;
                }
            }
        }
    }
</style>

<template>
    <div class="container footer-bar flex-row-center">
        <div 
        
            class="flex-row-column footer-bar__item" 
            :key="index" 
            v-for="(bar, index) in tabBar" 
            @click.stop="toPage(index)"
            :class="{'active' : tabIndex === index}">
            <img :src="[tabIndex === index? bar.currentIcon:bar.icon]"/>
            <!-- <i 
            class="text-18 iconfont text-sliver"
            :class="[bar.icon, bar.redDot ? 'red-dot' : '']">
            </i> -->
            <i class="qryCount" v-if="bar.name == '购物车'">1</i>
            <span class="text-sliver text-10">
                {{bar.name}}
            </span>
        </div>
    </div>
</template>

<script>
import indexIcon from '@/assets/images/tab/tab_icon_home_default.png'
import indexCurrentIcon from '@/assets/images/tab/tab_icon_home_selected.png'
import orderIcon from '@/assets/images/tab/tab_icon_order_default.png'
import orderCurrentIcon from '@/assets/images/tab/tab_icon_order_selected.png'
import shopIcon from '@/assets/images/tab/tab_icon_cart_default.png'
import shopCurrentIcon from '@/assets/images/tab/tab_icon_cart_selected.png'
import meIcon from '@/assets/images/tab/tab_icon_my_default.png'
import meCurrentIcon from '@/assets/images/tab/tab_icon_my_selected.png'

export default {
    data() {
        return {
            tabBar: [
                {
                    icon: indexIcon,
                    currentIcon:indexCurrentIcon,
                    name: '首页',
                    path: 'pages/index/main',
                    login: true
                },
                {
                    icon: orderIcon,
                    currentIcon:orderCurrentIcon,
                    name: '订单',
                    path: 'pages/order/main',
                    login: true
                },
                {
                    icon: shopIcon,
                    currentIcon:shopCurrentIcon,
                    name: '购物车',
                    path: 'pages/order-list/main',
                    login: true,
                    redDot: true
                },
                {
                    icon: meIcon,
                    currentIcon:meCurrentIcon,
                    name: '我的',
                    path: 'pages/user/main',
                    login: true,
                    redDot: true
                }
            ],
            // 当前选中的tab
            tabIndex: 0,
            // 当前登录次数
            loginNum: 0
        }
    },
    mounted() {
        this.getCurrentPageUrl()
        
        
    },
    onShow() {
       
    },
    methods: {
       getCurrentPageUrl() {
            let pages = getCurrentPages()               // 获取加载的页面
            let currentPage = pages[pages.length - 1]   // 获取当前页面的对象
            let url = currentPage.route                 // 当前页面url
            for (let i = 0, len = this.tabBar.length; i < len; i++) {
                let item = this.tabBar[i]
                if (item.path === url) {
                    this.tabIndex = i
                    break
                }
            }
            if (wx.getStorageSync('messageRedDot') === '') {
                this.tabBar[2].redDot = true
            } else {
                this.tabBar[2].redDot = wx.getStorageSync('messageRedDot')
            }
            console.log(wx.getStorageSync('messageRedDot'))
        },
        /**
         * 跳转页面
         * @param {Number} index 当前点击tab索引
         */
        toPage(index) {
            wx.redirectTo({
                url: `/${this.tabBar[index].path}`
            })
        }
    }
}
</script>